<!-- 个人资料 -->
<template>
	<div class="user-setting">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" :rules="rules" label-width="100px">
				<el-form-item label="头像：" prop="avatar">
					<material-picker v-model="formData.avatar" :limit="1" :photoHide="formData.avatar.length!=0?true:false" />
				</el-form-item>

				<el-form-item label="账号：" prop="account">
					<div class="w-80">
						<el-input v-model="formData.account" disabled />
					</div>
				</el-form-item>

				<el-form-item label="名称：" prop="name">
					<div class="w-80">
						<el-input v-model="formData.name" placeholder="请输入名称" />
					</div>
				</el-form-item>

				<el-form-item label="当前密码：" prop="password_old">
					<div class="w-80">
						<el-input v-model.trim="formData.password_old" placeholder="修改密码时必填, 不修改密码时留空" type="password"
							show-password />
					</div>
				</el-form-item>

				<el-form-item label="新的密码：" prop="password">
					<div class="w-80">
						<el-input v-model.trim="formData.password" placeholder="修改密码时必填, 不修改密码时留空" type="password"
							show-password />
					</div>
				</el-form-item>

				<el-form-item label="确定密码：" prop="password_confirm">
					<div class="w-80">
						<el-input v-model.trim="formData.password_confirm" placeholder="修改密码时必填, 不修改密码时留空"
							type="password" show-password />
					</div>
				</el-form-item>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
		<!-- v-perms="['setting.web.web_setting/setAgreement']" -->
	</div>
</template>

<script setup lang="ts">
	import pickerold from '@/components/material/pickerold.vue'
	import {
		setUserInfo
	} from '@/api/user'
	import useUserStore from '@/stores/modules/user'
	import feedback from '@/utils/feedback'
	import type {
		FormInstance
	} from 'element-plus'
	const formRef = ref < FormInstance > ()
	const userStore = useUserStore()
	// 表单数据
	const formData = reactive({
		avatar: '', // 头像
		account: '', // 账号
		name: '', // 名称
		password_old: '', // 当前密码
		password: '', // 新的密码
		password_confirm: '' // 确定密码
	})

	// 表单校验规则
	const rules = reactive < object > ({
		avatar: [{
			required: true,
			message: '头像不能为空',
			trigger: ['change']
		}],
		name: [{
			required: true,
			message: '请输入名称',
			trigger: ['blur']
		}]
	})

	// 获取个人设置
	// const getUser = async () => {
	// 	const userInfo = userStore.userInfo
	// 	for (const key in formData) {
	// 		//@ts-ignore
	// 		formData[key] = userInfo[key]
	// 	}
	// }
    // 获取个人设置// 个人设置头像修改--高扬
    const getUser = async () => {
  const userInfo = userStore.userInfo
  for (const key in formData) {
   //@ts-ignore
      formData[key] = userInfo[key]
      if (key == "avatar") {
        formData[key] =  userInfo[key].map((path: any) => ({ url: path, name: '头像' }))
      }else {
        formData[key] = userInfo[key]
      }
  }
 }
	// 设置个人设置
	const setUser = async () => {
		if (formData.password_old || formData.password || formData.password_confirm) {
			if (!formData.password_old) {
				return feedback.msgError('请输入当前密码')
			}

			if (!formData.password) {
				return feedback.msgError('请输入新的密码')
			}

			if (!formData.password_confirm) {
				return feedback.msgError('请输入确定密码')
			}

			if (formData.password_confirm != formData.password) {
				return feedback.msgError('两次输入的密码不一样')
			}
		}

		if (formData.password_old && formData.password && formData.password_confirm) {
			if (formData.password_old.length < 6 || formData.password_old.length > 32) {
				return feedback.msgError('密码长度在6到32之间')
			}
			if (formData.password.length < 6 || formData.password.length > 32) {
				return feedback.msgError('密码长度在6到32之间')
			}
			if (formData.password_confirm.length < 6 || formData.password_confirm.length > 32) {
				return feedback.msgError('密码长度在6到32之间')
			}
		}
		await setUserInfo(formData)
		userStore.getUserInfo()
	}

	// 提交数据
	const handleSubmit = async () => {
		await formRef.value?.validate()
		setUser()
	}

	getUser()
</script>

<style lang="scss" scoped></style>
